<template>
  <div class="ly_list">
    <div class="gengduo"
         @click="tiao()">点我帮助更多流浪宠物</div>
    <div class="jiuzhu">
      <div class="top">
        流浪宠物救助站
      </div>
      <div class="zjian">
        <div class="qian">
          <img src="/imgs/shouye_jiuzhu_qian.webp"
               alt="">
        </div>
        <div class="hou">
          <img src="/imgs/shouye_jiuzhu_hou.webp"
               alt="">
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
  components: {},
  setup() {
    const router = useRouter()
    let hello = ref('hello')
    let tiao = () => {
      if (localStorage.getItem('username')) {
        router.push('/help')
      } else {
        router.push('/login')
      }
    }
    onMounted(() => {})

    return {
      hello,
      tiao
    }
  }
}
</script>

<style scoped lang="less">
.ly_list {
  width: 100%;
  height: 540px;
  background: url(/imgs/shou_jiuzhu.jpg) no-repeat;
  background-size: 100% 100%;
  position: relative;
  .gengduo {
    position: absolute;
    top: 30px;
    left: 855px;
    width: 240px;
    height: 50px;
    border-radius: 10% 25%;
    border-bottom: #cdbf62 4px solid;
    border-left: #cdbf62 4px solid;
    border-right: #cdbf62 4px dashed;
    border-top: #cdbf62 4px dashed;
    background-image: linear-gradient(to bottom, #f9eff1, #fff);
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #d28936;
    font-weight: 700;
  }
  .gengduo:hover {
    position: absolute;
    top: 30px;
    left: 855px;
    width: 240px;
    height: 50px;
    border-radius: 10% 25%;
    border-bottom: #cdbf62 4px solid;
    border-left: #cdbf62 4px solid;
    border-right: #cdbf62 4px dashed;
    border-top: #cdbf62 4px dashed;
    background-image: linear-gradient(to bottom, #f9eff1, #fff);
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #d28936;
    font-weight: 700;
    cursor: pointer;
  }
  .jiuzhu {
    position: absolute;
    top: 100px;
    left: 450px;
    width: 645px;
    height: 420px;
    border: 4px solid #cdbf62;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #000;
    border-radius: 68px 68px 0 0;
    .top {
      width: 100%;
      height: 50px;
      border-bottom: 4px solid #cdbf62;
      font-size: 20px;
      color: #d28936;
      font-weight: 700;
    }
    .zjian {
      width: 100%;
      height: 300px;
      display: flex;
      .qian {
        width: 50%;
        height: 100%;
        border-right: 1px solid #000;
        img {
          width: 100%;
          height: 362px;
        }
      }
      .hou {
        width: 50%;
        height: 100%;
        img {
          width: 100%;
          height: 362px;
        }
      }
    }
  }
}
</style>

